<template>
  <a-modal
    style="width: 50%"
    title="开通"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    :maskClosable="false"
    :forceRender="true">
    <div style="margin-top: 12px;min-height: 300px;">
      <a-form-model ref="changeForm" :model="addForm" :rules="addRules">
        <a-form-model-item label="手机号" prop="phoneNumber" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-input v-model.trim="addForm.phoneNumber" type="text" placeholder="请输入手机号" />
        </a-form-model-item>
        <a-form-model-item label="邮箱" prop="email" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-input v-model.trim="addForm.email" type="text" placeholder="请输入邮箱" />
        </a-form-model-item>
        <a-form-model-item label="密码" prop="password" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-input v-model.trim="addForm.password" type="text" placeholder="请输入密码" />
        </a-form-model-item>
        <a-form-model-item label="头衔" prop="presentTitle" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-input v-model.trim="addForm.presentTitle" type="text" placeholder="请输入头衔" />
        </a-form-model-item>
        <a-form-model-item label="角色" prop="roleIds" :label-col="labelCol" :wrapper-col="wrapperCol">
          <!-- <a-select mode="multiple" labelInValue placeholder="请选择角色" v-model="addForm.roleIds">
                        <a-select-option v-for="item in roleList" :key="item.roleId">
                            {{ item.name }}
                        </a-select-option>
                    </a-select> -->
          <a-tree-select
            :replaceFields="{
              children: 'children', label: 'name', value: 'roleId', key: 'roleId'
            }"
            :default-expanded-keys="addForm.roleIds"
            :default-selected-keys="addForm.roleIds"
            :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
            tree-checkable
            tree-default-expand-all
            :tree-data="roleList"
            :max-tag-count="10"
            tree-node-filter-prop="name"
            placeholder="请选择角色"
            v-model="addForm.roleIds">
          </a-tree-select>
        </a-form-model-item>
      </a-form-model>
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a-button
        type="primary"
        :visible="visibleBtn"
        :loading="loadingBtn"
        @click="handleOk"
        v-checkBtn="'open:account'">
        保存
      </a-button>
    </template>
  </a-modal>
</template>
<script>
import { openAccount, detailEmployees } from '@/api/staff'
import { getRoles } from '@/api/lessee'
export default {
    data () {
        return {
            addRules: {
                password: [
                    { required: true, message: '请输入密码!', trigger: 'blur' }
                ],
                roleIds: [
                    { required: true, message: '请选择角色!', trigger: 'change' }
                ]
            },
            addForm: {
                employeeId: '',
                phoneNumber: '',
                email: '',
                password: '',
                presentTitle: '',
                roleIds: null
            },
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            visible: false,
            confirmLoading: false,
            loading: false,
            visibleBtn: false,
            loadingBtn: false,
            employeeId: null,
            roleList: []// 租户角色
        }
    },
    mounted () {
        getRoles().then(res => {
            if (res.code == 200) {
                this.roleList = res.data
            }
        })
    },
    methods: {
        // 显示
        open (row) {
            console.log(row)

            this.visible = true
            detailEmployees(row.partyId).then(res => {
                if (res.code == 200) {
                    this.addForm = res.data
                    this.addForm.employeeId = row.partyId
                    this.addForm.identityCardId = ''
                    this.addForm.organizationUnitId = row.organizationUnitId
                }
            })
            return this
        },
        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.$emit('close')
        },
        // 确认
        handleOk () {
            this.loadingBtn = true
            this.visibleBtn = true
            this.$refs.changeForm.validate(valid => {
                if (valid) {
                    openAccount(this.addForm).then(res => {
                        if (res.code === 200) {
                            this.$notification['success']({
                                message: '提示',
                                description: '保存成功！',
                                duration: 8
                            })
                            this.visible = false
                            this.$emit('success')
                        } else {
                            this.$notification['error']({
                                message: '提示',
                                description: res.message,
                                duration: 8
                            })
                        }
                        this.visibleBtn = false
                        this.loadingBtn = false
                    })
                } else {
                    this.loadingBtn = false
                    this.visibleBtn = false
                    return false
                }
            })
        }
    }
}
</script>
<style scoped>

</style>
